2 стильных виджета социальных сетей.|шпаргалки блогерши
Всем, привет. Ещё один пост в копилку виджетов социальных сетей. Такие стильные кнопки обязательно привлекут внимание посетителей. Я предлагаю вам 2 варианта на выбор. Они совершенно простые в установке. Нужно только добавить в предложенные коды свои адреса в социальных сетях. Затем установить код в гаджет HTML/JavaScript и переместить в нужное место. Вариант 1. Посмотрите рабочий пример на этом блоге.Код.
https://www.facebook.com/viktoria.barad">https://twitter.com/VikserV"> https://plus.google.com/u/0/102675035951405180575/posts"> http://feeds.feedburner.com/shpargalochkiru ">.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c} </style>
Замените строки отмеченные красным цветом на свои, соответственно - facebook, twitter, гугл+, feedburner.Вариант 2.
Этот содержит в себе больше - Facebook , Twitter , Google Plus , Pinterest , Linkedin , RSS и Youtube.
Код. <div><li><a href=http://www.facebook.com/###"></a></li><li><a href=http://twitter.com/###></a></li> <li><a href="https://plus.google.com/###"></a></li> <li><a href=http://pinterest.com/###"></a></li> <li><a href=https://www.linkedin.com/in/###"></a></li> <li><a href=http://www.youtube.com/###></a></li> <li><a href=http://feeds.feedburner.com/###"></a></li> </div><style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style>
Здесь так же вместо решёток напишите свои адреса в соц. сетях. Вот и всё. Надеюсь, что вам приглянулись такие стильные виджеты социальных сетей. Спасибо всем за внимание и до скорых встреч. www.shpargalochki.ru
Как прижать элемент к низу или верху родительского элемента — Site on!
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
06.08.2013
Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, div к низу другого div. Всё дело в том, что по одноименному запросу в своё время я не смог найти нужных мне ответов, поэтому сейчас я расскажу вам обо всех возможных способах сделать это.
Допустим, у нас есть 2 элемента на странице, неважно какие именно, для примера возьмём 2 div. Один из них будет вложен в другой, причём высота родителя будет больше высоты ребёнка:
<style> #parent{ background:black; height:300px; } #child{ background:red; height:100px; width:100px; } </style> <div> <div>Текст дочернего элемента</div> </div> Для красоты и наглядности я сделал дочерний элемент квадратным:
Способ №1. Абсолютное позиционирование
Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:
<style> #parent{ position:relative; /* добавили */ background:black; height:300px; } #child{ position:absolute; /* добавили */ bottom:0; /* добавили */ background:red; height:100px; width:100px; } </style> <div> <div>Текст дочернего элемента</div> </div> Результат:
Плюсы:
Простота Минусы:
При абсолютном позиционировании другие элементы на странице ведут себя так, будто элемента с абс. позиционированием не существует. Это значит что в таком случае:
<style> #parent{ background:black; height:300px; } #child,#child2,#child3{ display:inline-block; /* Сделали все div в одну строку */ height:100px; width:100px; } #child{ background:red; } #child2{ background:yellow; } #child3{ background:green; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div> Результат:
После проделанного выше способа получиться следующее:
Все элементы легли друг на друга, так как они не понимают, что существуют другие элементы, кроме них самих. В результате последний div (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.
Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:
<style> #parent{ position:relative; /* добавили */ background:black; height:300px; } #child,#child2,#child3{ position:absolute; /* добавили */ bottom:0; /* добавили */ height:100px; width:100px; } #child{ left:0; /* добавили */ background:red; } #child2{ left:110px; /* добавили */ background:yellow; } #child3{ left:220px; /* добавили */ background:green; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div> Результат:
Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.
Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:
Знать точное количество блоков; Для каждого блока рассчитать и написать координату left; Если со временем мы решим добавить ещё блоков, нам опять-таки придётся снова для каждого нового блока указывать свойство left. Способ №2. Вертикальное выравнивание
Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:
<style> #parent{ background:black; } #child,#child2,#child3{ display:inline-block; } #child{ background:red; height:300px; width:100px; } #child2{ background:yellow; height:100px; width:100px; } #child3{ background:green; height:200px; width:100px; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div> Результат:
Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:
<style> #parent{ background:black; } #child,#child2,#child3{ vertical-align:bottom; /* вот она */ display:inline-block; } #child{ background:red; height:300px; width:100px; } #child2{ background:yellow; height:100px; width:100px; } #child3{ background:green; height:200px; width:100px; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div> Результат:
Заметки:
1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.
Как прижать элементы к верху родительского
Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.
Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:
<style> #parent{ background:black; } #child,#child2,#child3{ width:100px; display:inline-block; } #child{ background:red; } #child2{ background:yellow; } #child3{ background:green; } </style> <div> <div>Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div> <div>Мало текста, мало текста. Текст дочернего элемента 2</div> <div>Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div> </div> Результат:
Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:
<style> #parent{ background:black; } #child,#child2,#child3{ vertical-align:top; /* top */ width:100px; display:inline-block; } #child{ background:red; } #child2{ background:yellow; } #child3{ background:green; } </style> <div> <div>Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div> <div>Мало текста, мало текста. Текст дочернего элемента 2</div> <div>Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div> </div> Результат:
Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!
Пожалуйста, оцените эту статью Средняя оценка: 4.32 из 5 (проголосовало: 113) Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!
Вы можете помочь развитию проекта, сделав всего 1 клик:Спасибо! site-on.net
Урок 11. Относительное позиционирование и плавающие блоки
При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами: Относительное позиционированиеБлок 1
Блок 2
Блок 3
Давайте зададим в таблице стилей размеры и границы этих блоков: #blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так: Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило:
#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; } #blok2{ position:relative; left:50px; top:25px; }
Теперь наша страница выглядит так: Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах. Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и рассмотрим плавающие блоки.
Плавающие блоки
Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.
Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align.
Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:
- left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
- right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.
- none - блок не перемещается и позиционируется согласно свойству position.
Давайте посмотрим на примере. Пусть у нас есть html-страница со следующим кодом: Позиционирование блоковТекст блока 1
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д. И страница style.css со следующим кодом: #blok1{ border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так:Давайте сделаем наш блок плавающим и прижмем его к левому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; }
Теперь наша страница в браузере выглядит так: Теперь давайте прижмем блок к правому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так: А что будет, если плавающих блоков на странице несколько? Давайте добавим в нашу html-страницу еще один блок:
Позиционирование блоковТекст блока 1
Текст блока 2
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д. И зададим им разные значения свойства float: #blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так:А если у них будут одинаковые значения? Например:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:left; }
Тогда второй блок прижмется к правому краю первого блока:Аналогична будет ситуация при одинаковых значениях right:
#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2.
А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство clear, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этог свойства может быть задано одно из четырех значений:
- left - блок должен располагаться ниже всех левосторонних блоков.
- right - блок должен располагаться ниже всех правосторонних блоков.
- both - блок должен располагаться ниже всех плавающих блоков.
- none - никаких ограничений нет, это значение по умолчанию.
Давайте в нашем последнем примере зададим это свойство для второго блока: #blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right; }
Теперь получилось так, как и хотелось: один блок под другим:В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали вот такую страницу:
Давайте посмотрим, как ее можно сделать с помощью плавающих блоков. Итак, код самой страницы следующий:
Позиционирование блоков контент блок новостей
На странице style.css зададим сначала размеры и фон для наших блоков: #header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; }
Сейчас наши блоки располагаются в нормальном потоке, т.е. один под другим. Нам надо сделать блоки menu и content плавающими и левосторонними. А блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком: #header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; float:left; } #content{ background:oldlace; width:525px; height:300px; float:left; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; float:right; }
Наша страница в браузере выглядит так:
Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке content. А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева.
Почему же у нас так не получилось? Потому что наш блок news в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш div="news" выше текста (т.е. до слова "контент"):
Позиционирование блоков блок новостей
контент Вот теперь наш блок новостей находится на своем месте:
А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей:
#news{ background:yellow; width:150px; height:280px; float:right; margin:10px; }
Теперь мы добились такого же резельтата, как и при абсолютном позиционировании.Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).
Фиксированные блоки
Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.
У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).
#blok{ position:fixed; left:0px; top:0px; }
Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.На сегодня все. В следующем уроке мы познакомимся еще с некоторыми свойствами блоков и их видами.
Предыдущий урок Вернуться в раздел Следующий урок
www.site-do.ru
2 стильных виджета социальных сетей.
Всем, привет. Ещё один пост в копилку виджетов социальных сетей. Такие стильные кнопки обязательно привлекут внимание посетителей. Я предлагаю вам 2 варианта на выбор. Они совершенно простые в установке. Нужно только добавить в предложенные коды свои адреса в социальных сетях. Затем установить код в гаджет HTML/JavaScript и переместить в нужное место. Вариант 1. Посмотрите рабочий пример на этом блоге.Код.
<div><li><a href=" https://www.facebook.com/viktoria.barad"></a></li><li><a href=" https://twitter.com/VikserV"></a></li><li><a href=" https://plus.google.com/u/0/102675035951405180575/posts"></a></li><li><a href=" http://feeds.feedburner.com/shpargalochkiru "></a></li></div><style>
.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c} </style>
Замените строки отмеченные красным цветом на свои, соответственно - facebook, twitter, гугл+, feedburner.Вариант 2.
Этот содержит в себе больше - Facebook , Twitter , Google Plus , Pinterest , Linkedin , RSS и Youtube.
Код. <div><li><a href=http://www.facebook.com/###"></a></li><li><a href=http://twitter.com/###></a></li> <li><a href="https://plus.google.com/###"></a></li> <li><a href=http://pinterest.com/###"></a></li> <li><a href=https://www.linkedin.com/in/###"></a></li> <li><a href=http://www.youtube.com/###></a></li> <li><a href=http://feeds.feedburner.com/###"></a></li> </div><style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style>
Здесь так же вместо решёток напишите свои адреса в соц. сетях. Вот и всё. Надеюсь, что вам приглянулись такие стильные виджеты социальных сетей.
Спасибо всем за внимание и до скорых встреч.
helloblogger.ru
2 стильных виджета социальных сетей.|шпаргалки блогерши
Всем, привет. Ещё один пост в копилку виджетов социальных сетей. Такие стильные кнопки обязательно привлекут внимание посетителей. Я предлагаю вам 2 варианта на выбор. Они совершенно простые в установке. Нужно только добавить в предложенные коды свои адреса в социальных сетях. Затем установить код в гаджет HTML/JavaScript и переместить в нужное место. Вариант 1. Посмотрите рабочий пример на этом блоге.Код.
https://www.facebook.com/viktoria.barad">https://twitter.com/VikserV"> https://plus.google.com/u/0/102675035951405180575/posts"> http://feeds.feedburner.com/shpargalochkiru ">.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c} </style>
Замените строки отмеченные красным цветом на свои, соответственно - facebook, twitter, гугл+, feedburner.Вариант 2.
Этот содержит в себе больше - Facebook , Twitter , Google Plus , Pinterest , Linkedin , RSS и Youtube.
Код.<div><li><a href=http://www.facebook.com/###"></a></li><li><a href=http://twitter.com/###></a></li> <li><a href="https://plus.google.com/###"></a></li> <li><a href=http://pinterest.com/###"></a></li> <li><a href=https://www.linkedin.com/in/###"></a></li> <li><a href=http://www.youtube.com/###></a></li> <li><a href=http://feeds.feedburner.com/###"></a></li> </div><style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style>
Здесь так же вместо решёток напишите свои адреса в соц. сетях. Вот и всё. Надеюсь, что вам приглянулись такие стильные виджеты социальных сетей. Спасибо всем за внимание и до скорых встреч.www.shpargalochki.ru
Как прижать элемент к низу или верху родительского элемента — Site on!
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
06.08.2013
Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, div к низу другого div. Всё дело в том, что по одноименному запросу в своё время я не смог найти нужных мне ответов, поэтому сейчас я расскажу вам обо всех возможных способах сделать это.
Допустим, у нас есть 2 элемента на странице, неважно какие именно, для примера возьмём 2 div. Один из них будет вложен в другой, причём высота родителя будет больше высоты ребёнка:
<style> #parent{ background:black; height:300px; } #child{ background:red; height:100px; width:100px; } </style> <div> <div>Текст дочернего элемента</div> </div>Для красоты и наглядности я сделал дочерний элемент квадратным:
Способ №1. Абсолютное позиционирование
Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:
<style> #parent{ position:relative; /* добавили */ background:black; height:300px; } #child{ position:absolute; /* добавили */ bottom:0; /* добавили */ background:red; height:100px; width:100px; } </style> <div> <div>Текст дочернего элемента</div> </div>Результат:
Плюсы:
Минусы:
Это значит что в таком случае:
<style> #parent{ background:black; height:300px; } #child,#child2,#child3{ display:inline-block; /* Сделали все div в одну строку */ height:100px; width:100px; } #child{ background:red; } #child2{ background:yellow; } #child3{ background:green; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div>Результат:
После проделанного выше способа получиться следующее:
Все элементы легли друг на друга, так как они не понимают, что существуют другие элементы, кроме них самих. В результате последний div (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.
Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:
<style> #parent{ position:relative; /* добавили */ background:black; height:300px; } #child,#child2,#child3{ position:absolute; /* добавили */ bottom:0; /* добавили */ height:100px; width:100px; } #child{ left:0; /* добавили */ background:red; } #child2{ left:110px; /* добавили */ background:yellow; } #child3{ left:220px; /* добавили */ background:green; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div>Результат:
Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.
Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:
Способ №2. Вертикальное выравнивание
Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:
<style> #parent{ background:black; } #child,#child2,#child3{ display:inline-block; } #child{ background:red; height:300px; width:100px; } #child2{ background:yellow; height:100px; width:100px; } #child3{ background:green; height:200px; width:100px; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div>Результат:
Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:
<style> #parent{ background:black; } #child,#child2,#child3{ vertical-align:bottom; /* вот она */ display:inline-block; } #child{ background:red; height:300px; width:100px; } #child2{ background:yellow; height:100px; width:100px; } #child3{ background:green; height:200px; width:100px; } </style> <div> <div>Текст дочернего элемента 1</div> <div>Текст дочернего элемента 2</div> <div>Текст дочернего элемента 3</div> </div>Результат:
Заметки:
1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.
Как прижать элементы к верху родительского
Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.
Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:
<style> #parent{ background:black; } #child,#child2,#child3{ width:100px; display:inline-block; } #child{ background:red; } #child2{ background:yellow; } #child3{ background:green; } </style> <div> <div>Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div> <div>Мало текста, мало текста. Текст дочернего элемента 2</div> <div>Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div> </div>Результат:
Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:
<style> #parent{ background:black; } #child,#child2,#child3{ vertical-align:top; /* top */ width:100px; display:inline-block; } #child{ background:red; } #child2{ background:yellow; } #child3{ background:green; } </style> <div> <div>Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div> <div>Мало текста, мало текста. Текст дочернего элемента 2</div> <div>Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div> </div>Результат:
Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!
Пожалуйста, оцените эту статью Средняя оценка: 4.32 из 5 (проголосовало: 113)Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!
Вы можете помочь развитию проекта, сделав всего 1 клик:Спасибо!site-on.net
Урок 11. Относительное позиционирование и плавающие блоки
При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами: Относительное позиционированиеБлок 1
Блок 2
Блок 3
Давайте зададим в таблице стилей размеры и границы этих блоков:#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так:Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило:
#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; } #blok2{ position:relative; left:50px; top:25px; }
Теперь наша страница выглядит так:Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах. Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и рассмотрим плавающие блоки.
Плавающие блоки
Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.
Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align.
Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:
- left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
- right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.
- none - блок не перемещается и позиционируется согласно свойству position.
Текст блока 1
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д. И страница style.css со следующим кодом:#blok1{ border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так:Давайте сделаем наш блок плавающим и прижмем его к левому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; }
Теперь наша страница в браузере выглядит так:Теперь давайте прижмем блок к правому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так:А что будет, если плавающих блоков на странице несколько? Давайте добавим в нашу html-страницу еще один блок:
Позиционирование блоковТекст блока 1
Текст блока 2
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д. И зададим им разные значения свойства float:#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так:А если у них будут одинаковые значения? Например:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:left; }
Тогда второй блок прижмется к правому краю первого блока:Аналогична будет ситуация при одинаковых значениях right:
#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2.
А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство clear, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этог свойства может быть задано одно из четырех значений:
- left - блок должен располагаться ниже всех левосторонних блоков.
- right - блок должен располагаться ниже всех правосторонних блоков.
- both - блок должен располагаться ниже всех плавающих блоков.
- none - никаких ограничений нет, это значение по умолчанию.
#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right; }
Теперь получилось так, как и хотелось: один блок под другим:В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали вот такую страницу:
Давайте посмотрим, как ее можно сделать с помощью плавающих блоков. Итак, код самой страницы следующий:
Позиционирование блоков контентблок новостей
На странице style.css зададим сначала размеры и фон для наших блоков:#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; }
Сейчас наши блоки располагаются в нормальном потоке, т.е. один под другим. Нам надо сделать блоки menu и content плавающими и левосторонними. А блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; float:left; } #content{ background:oldlace; width:525px; height:300px; float:left; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; float:right; }
Наша страница в браузере выглядит так:
Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке content. А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева.
Почему же у нас так не получилось? Потому что наш блок news в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш div="news" выше текста (т.е. до слова "контент"):
Позиционирование блоковблок новостей
контент Вот теперь наш блок новостей находится на своем месте:
А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей:
#news{ background:yellow; width:150px; height:280px; float:right; margin:10px; }
Теперь мы добились такого же резельтата, как и при абсолютном позиционировании.Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).
Фиксированные блоки
Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.
У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).
#blok{ position:fixed; left:0px; top:0px; }
Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.На сегодня все. В следующем уроке мы познакомимся еще с некоторыми свойствами блоков и их видами.
Предыдущий урок Вернуться в раздел Следующий урок
www.site-do.ru
2 стильных виджета социальных сетей.
Всем, привет. Ещё один пост в копилку виджетов социальных сетей. Такие стильные кнопки обязательно привлекут внимание посетителей. Я предлагаю вам 2 варианта на выбор. Они совершенно простые в установке. Нужно только добавить в предложенные коды свои адреса в социальных сетях. Затем установить код в гаджет HTML/JavaScript и переместить в нужное место. Вариант 1. Посмотрите рабочий пример на этом блоге.Код.
<div><li><a href=" https://www.facebook.com/viktoria.barad"></a></li><li><a href=" https://twitter.com/VikserV"></a></li><li><a href=" https://plus.google.com/u/0/102675035951405180575/posts"></a></li><li><a href=" http://feeds.feedburner.com/shpargalochkiru "></a></li></div><style>
.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c} </style>
Замените строки отмеченные красным цветом на свои, соответственно - facebook, twitter, гугл+, feedburner.Вариант 2.
Этот содержит в себе больше - Facebook , Twitter , Google Plus , Pinterest , Linkedin , RSS и Youtube.
Код.<div><li><a href=http://www.facebook.com/###"></a></li><li><a href=http://twitter.com/###></a></li> <li><a href="https://plus.google.com/###"></a></li> <li><a href=http://pinterest.com/###"></a></li> <li><a href=https://www.linkedin.com/in/###"></a></li> <li><a href=http://www.youtube.com/###></a></li> <li><a href=http://feeds.feedburner.com/###"></a></li> </div><style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style>
Здесь так же вместо решёток напишите свои адреса в соц. сетях. Вот и всё. Надеюсь, что вам приглянулись такие стильные виджеты социальных сетей.
Спасибо всем за внимание и до скорых встреч.
helloblogger.ru
